<template>
  <div class="mapMenuBar">
    <el-dropdown
      v-for="(dropItem, index) in dropList"
      :key="index"
      @command="commandHandle"
      placement="bottom-end"
      trigger="click"
    >
      <span class="el-dropdown-link">
        {{ dropItem.title }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(menu, i) in dropItem.menuList"
          :key="i"
          :icon="
            menu.checked
              ? 'el-icon-remove-outline'
              : 'el-icon-circle-plus-outline'
          "
          :command="menu"
          :disabled="menu.disabled"
          >{{ menu.title }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

import { MousePosition, ScaleLine } from "ol/control";

export default {
  name: "ocn-map-menu-bar",
  data() {
    return {
      dropList: [
        {
          title: "基础控件示例",
          menuList: [
            {
              id: "0,0",
              title: "鼠标坐标",
              func: "Control",
              value: "MousePosition",
              checked: false,
              disabled: false,
            },
            {
              id: "0,1",
              title: "缩放比例尺",
              func: "Control",
              value: "ScaleLine",
              checked: false,
              disabled: false,
            },
          ],
        },
        {
          title: "基础方法示例",
          menuList: [
            {
              id: "1,0",
              title: "Animate方法",
              func: "Animate",
              value: "Animate",
              checked: false,
              disabled: false,
            },
          ],
        },
        {
          title: "业务方法示例",
          menuList: [
            {
              id: "2,0",
              title: "矢量图层撒点",
              func: "sprinkle",
              value: "sprinkle",
              checked: false,
              disabled: false,
            },
          ],
        },
        {
          title: "自定义监听事件",
          menuList: [
            {
              id: "3,0",
              title: "鼠标move事件",
              func: "",
              value: "",
              checked: false,
              disabled: true,
            },
            {
              id: "3,1",
              title: "鼠标click事件",
              func: "eventSwitch",
              value: {
                eventName: "testClick",
                eventType: "singleclick",
                fn: function (baseMap, evt) {
                  console.log("test self event  singleclick:", evt);
                  alert("自定义事件已挂载到监听事件列表: 点击触发");
                },
              },
              checked: false,
              disabled: false,
            },
            {
              id: "3,2",
              title: "底图拖动事件",
              func: "eventSwitch",
              value: {
                eventName: "testmove",
                eventType: "moveend",
                fn: function (baseMap, evt) {
                  console.log("test self event  moveend:", evt);
                  alert("自定义事件已挂载到监听事件列表： 底图拖动结束触发");
                },
              },
              checked: false,
              disabled: false,
            },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapGetters("olMap", ["getBaseMap", "getControls", "getMapBusiness"]),
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations("olMap", ["setControls"]),

    /**
     * @author QL
     * @functionName controlSwitch
     * @param { String } commandHandle
     * @date 2022-02-23 15:08:42
     * @version V..
     * @description 下拉菜单指令分发器
     */
    commandHandle(menu) {
      switch (menu.func) {
        case "Control":
          if (!menu.checked) {
            this.addControl(menu.value);
            this.dropList[menu.id.split(",")[0]].menuList[
              menu.id.split(",")[1]
            ].checked = true;
          } else {
            this.dropList[menu.id.split(",")[0]].menuList[
              menu.id.split(",")[1]
            ].checked = false;
            this.removeControl(menu.value);
          }
          break;

        case "Animate":
          this.changeAnimate(17);
          break;

        case "sprinkle":
          let points = [
            [120.4208371196057, 37.38169152061805],
            [120.42185371196057, 37.38269152061805],
            [120.42286371196057, 37.38369152061805],
          ];
          this.sprinkle(points, menu);
          break;

        case "eventSwitch":
          this.eventSwitch(menu);
          break;

        case "clickGetFeature":
          this.clickGetFeature(menu);
          break;
      }
    },

    /**
     * @author QL
     * @functionName addControl
     * @param { String } controlType
     * @date 2022-02-23 15:07:57
     * @version V..
     * @description 添加指定控件
     */
    addControl(controlType) {
      let map = this.getBaseMap("page");
      switch (controlType) {
        case "MousePosition":
          this.setControls({
            typeName: "page",
            controlName: "MousePosition",
            valueVal: new MousePosition(),
            fn: (obj) => {
              this.$utils.setConsole("set添加操作同步回调---：", obj);
              map.addControl(this.getControls("page", "MousePosition"));
            },
          });
          break;

        case "ScaleLine":
          this.setControls({
            typeName: "page",
            controlName: "ScaleLine",
            valueVal: new ScaleLine(),
            fn: (obj) => {
              this.$utils.setConsole("set添加操作同步回调---：", obj);
              map.addControl(this.getControls("page", "ScaleLine"));
            },
          });
          break;
      }
    },

    /**
     * @author QL
     * @functionName removeControl
     * @param { String } controlType
     * @date 2022-02-23 15:07:14
     * @version V..
     * @description 删除指定控件对象
     */
    removeControl(controlType) {
      let map = this.getBaseMap("page");
      switch (controlType) {
        case "MousePosition":
          map.removeControl(this.getControls("page", "MousePosition"));
          this.setControls({
            typeName: "page",
            controlName: "MousePosition",
            valueVal: "",
            fn: (obj) => {
              this.$utils.setConsole("set删除操作同步回调---：", obj);
            },
          });
          break;

        case "ScaleLine":
          map.removeControl(this.getControls("page", "ScaleLine"));
          this.setControls({
            typeName: "page",
            controlName: "ScaleLine",
            valueVal: "",
            fn: (obj) => {
              this.$utils.setConsole("set删除操作同步回调---：", obj);
            },
          });
          break;
      }
    },

    /**
     * @author QL
     * @functionName changeAnimate
     * @param { Number } zoom 缩放比例
     * @date 2022-02-23 15:31:58
     * @version V..
     * @description 采用基础api animate() 更换底图的中心点并切换缩放比例
     */
    changeAnimate(zoom) {
      this.getMapBusiness("page").move2Point(
        [120.42083371196057, 37.38269152061805],
        zoom
      );
    },

    /**
     * @author QL
     * @functionName sprinkle
     * @param { Array } ponitList
     * @date 2022-03-01 10:13:36
     * @version V..
     * @description 创建撒点图层
     */
    sprinkle(ponitList, menu) {
      this.getMapBusiness("page").sprinkle(ponitList, "firstVector", (res) => {
        if (res === "checked") {
          this.dropList[menu.id.split(",")[0]].menuList[
            menu.id.split(",")[1]
          ].checked = true;
        } else {
          this.dropList[menu.id.split(",")[0]].menuList[
            menu.id.split(",")[1]
          ].checked = false;
        }
      });
    },

    /**
     * @author QL
     * @functionName eventSwitch
     * @param { * }
     * @date 2022-03-03 11:25:29
     * @version V..
     * @description 自定义事件的开关
     */
    eventSwitch(menu) {
      let mapBusiness = this.getMapBusiness("page");
      let eventCatch = mapBusiness._getSelfEvents(menu.value.eventType);
      let eventIndex = eventCatch.indexOf(menu.value);

      if (eventIndex == -1) {
        mapBusiness.bindSelfEvent(menu.value);
        this.dropList[menu.id.split(",")[0]].menuList[
          menu.id.split(",")[1]
        ].checked = true;
      } else {
        mapBusiness.unboundSelfEvent(menu.value);
        this.dropList[menu.id.split(",")[0]].menuList[
          menu.id.split(",")[1]
        ].checked = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mapMenuBar {
  width: 100%;
  padding: 10px 30px;
  align-self: stretch;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 0;
}

.el-dropdown {
  margin: 0 20px 0 0;
}

.el-dropdown-link {
  cursor: pointer;
  color: #e6ffdb;
  font-size: 16px;
}
.el-icon-arrow-down {
  font-size: 14px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

.el-icon--right {
  &::before {
    content: "" !important;
  }
}
</style>
